<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body style="background: url(layui/images/img/examBg.jpg);background-size: 100%">
<h2 class="layui-header" style="text-align: center;height: 40px;">
    智能评分考试系统
</h2>
<hr>

<div class="layui-row">
    <div class="layui-col-md2 layui-col-md-offset1" style="opacity: 80%;margin-top: 10px;text-align: center">
        <div class="layui-row">
            <img th:src="${session.user.img}" style="border-radius: 50%;width: 120px;height: 120px"><br>
            <h5 style="margin-top: 20px">[[${session.user.userName}]]</h5>
        </div>
        <hr>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a th:href="@{/aboutMe}">个人中心</a><br>
                <i>PERSONAL CENTER</i>
            </h4>
        </div>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a th:href="@{/detail}">首页</a><br>
                <i>HOME</i>
            </h4>
        </div>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a href="">我的测验</a><br>
                <i>MY TEST</i>
            </h4>
        </div>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a th:href="@{/loginOut}">退出系统</a><br>
                <i>LOGIN OUT</i>
            </h4>
        </div>
    </div>
    <div class="layui-col-md7 layui-col-md-offset1" style="margin-top: 30px;opacity: 60%">
       <table class="layui-hide" id="myPage" lay-filter="myTest"></table>
   </div>
</div>

<script src="layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#myPage'
            ,method:'get'
            ,url:'/myTestJson'
            ,cellMinWidth: 50 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar:false
            ,cols: [
            [
                {field:'testId', title: 'ID', sort: true,width:60}
                ,{field:'testName', title: '试卷名称',width:250} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'testScore', title: '试卷总分', sort: true}
                ,{field:'testTime', title: '答卷时限', sort:true, templet: '#timeTpl',width:120}
                ,{field:'testDate', title: '考试日期', sort:true, templet: '#dateTpl',width:150}
                ,{field:'action', title:'操作', toolbar: '#bar'}
            ]
                ]
            ,page: true ,page: {
                //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,limit:5
                ,groups: 2 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
        });

        table.on('tool(myTest)', function(obj){
            var checkStatus = obj.data.testId;
            if(obj.event === 'del'){
                layer.confirm('准备好了吗？哥们！',{icon: 3, title:'提示'}, function(index){
                var searchForm = document.createElement("form");
                    searchForm.id = "searchForm";
                    searchForm.method = "get";
                    searchForm.action = "/startTest";
                    searchForm.style.display = "none";
                    searchForm.target="true";
                    var insertValInput = document.createElement("input");
                    insertValInput.type = "text";
                    insertValInput.name = "testId";
                    insertValInput.value = checkStatus;
                    searchForm.appendChild(insertValInput);
                    document.body.appendChild(searchForm);
                    searchForm.submit();
                    document.body.removeChild(searchForm);
                layer.close(index);
            });
        }
        });
    });
</script>
<script type="text/html" id="dateTpl">
    {{layui.util.toDateString(new Date(d.testDate).getTime(), "yyyy-MM-dd HH:mm") }}
</script>
<script type="text/html" id="timeTpl">
    {{layui.util.toDateString(new Date(d.testTime).getTime(), "HH:mm:ss") }}
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="del">答卷详情</a>
<!--    <a class="layui-btn layui-btn-xs" lay-event="det">已参与，查看详情</a>-->
</script>

</body>
</html>